<template>
    <div class="contract_main">
        <el-row class="head">
            <el-col :span="24">
                <h1 class="contract_title" style="margin-left: 30px!important;">出库管理</h1>
            </el-col>
        </el-row>
        <el-row class="nav">
            <el-col>
                <div class="nav-item" style="margin-left:5px!important;">
                    <el-button type="text" @click="open_add_out">
                        <i class="iconfont icon-qianbi icon-sty"></i>申请出库
                    </el-button>
                </div>
                <!--申请出库-->
                <el-dialog :visible.sync="outVisible" width="50%" :close-on-click-modal="false" append-to-body>
                    <add_out></add_out>
                </el-dialog>
                <!--Excel导出按钮-->
                <div class="nav-item">
                    <download-excel :data="allOut" :fields="excelFields" name="出库列表.xls" type="xls">
                        <el-button type="text">
                            <i class="iconfont icon-excel"></i>Excel导出
                        </el-button>
                    </download-excel>
                </div>
                <div class="selectDiv">
                    <el-form>
                        <el-form-item>
                            <el-select placeholder="请选择查询方式" v-model="selectModel" style="border-radius:4px;height:40px;width:160px!important;margin-left:-110px" >
                                <el-option v-for="i in selectData" :label="i.label" :value="i.value" :key="i.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-input placeholder="请输入查询内容" style="width:160px!important;margin-left: -90px" v-model="searchText"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button style="margin-left: -70px" @click="searchOut">查询</el-button>
                            <el-button @click="clearSearchOut">显示全部</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
        <div class="content">
            <el-tabs type="border-card"  v-model="activeName" @tab-click="changeByState" v-loading="loading">
                <el-tab-pane label="全部" name="first">
                    <el-table :data="outList">
                        <el-table-column prop="outDan" label="出库单号" align="center"></el-table-column>
                        <el-table-column prop="emp.empName" label="出库员" align="center"></el-table-column>
                        <el-table-column prop="outDate" label="申请日期" align="center"></el-table-column>
                        <el-table-column prop="state" label="订单状态" align="center">
                            <template slot-scope="s">
                                <span>{{s.row.state==0?"待审核":(s.row.state==1?"未通过":(s.row.state==2?"已通过":"已完成"))}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="remark" label="备注" align="center">
                            <template slot-scope="s">
                                {{s.row.remark?s.row.remark:"无"}}
                            </template>
                        </el-table-column>
                        <el-table-column label="查看" width="100" align="center">
                            <template slot-scope="s">
                                <el-button type="primary" icon="el-icon-view" circle @click="go_detail(s.row)"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="待审核" name="second">
                    <el-table :data="outList">
                        <el-table-column prop="outDan" label="出库单号" align="center"></el-table-column>
                        <el-table-column prop="emp.empName" label="出库员" align="center"></el-table-column>
                        <el-table-column prop="outDate" label="申请日期" align="center"></el-table-column>
                        <el-table-column prop="state" label="订单状态" align="center">
                            <template slot-scope="s">
                                <span>{{s.row.state==0?"待审核":(s.row.state==1?"未通过":(s.row.state==2?"已通过":"已完成"))}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="remark" label="备注" align="center">
                            <template slot-scope="s">
                                {{s.row.remark?s.row.remark:"无"}}
                            </template>
                        </el-table-column>
                        <el-table-column label="查看" width="100" align="center">
                            <template slot-scope="s">
                                <el-button type="primary" icon="el-icon-view" circle @click="go_detail(s.row)"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="未通过" name="third">
                    <el-table :data="outList">
                        <el-table-column prop="outDan" label="出库单号" align="center"></el-table-column>
                        <el-table-column prop="emp.empName" label="出库员" align="center"></el-table-column>
                        <el-table-column prop="outDate" label="申请日期" align="center"></el-table-column>
                        <el-table-column prop="state" label="订单状态" align="center">
                            <template slot-scope="s">
                                <span>{{s.row.state==0?"待审核":(s.row.state==1?"未通过":(s.row.state==2?"已通过":"已完成"))}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="remark" label="备注" align="center">
                            <template slot-scope="s">
                                {{s.row.remark?s.row.remark:"无"}}
                            </template>
                        </el-table-column>
                        <el-table-column label="查看" width="100" align="center">
                            <template slot-scope="s">
                                <el-button type="primary" icon="el-icon-view" circle @click="go_detail(s.row)"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="已通过" name="fourth">
                    <el-table :data="outList">
                        <el-table-column prop="outDan" label="出库单号" align="center"></el-table-column>
                        <el-table-column prop="emp.empName" label="出库员" align="center"></el-table-column>
                        <el-table-column prop="outDate" label="申请日期" align="center"></el-table-column>
                        <el-table-column prop="state" label="订单状态" align="center">
                            <template slot-scope="s">
                                <span>{{s.row.state==0?"待审核":(s.row.state==1?"未通过":(s.row.state==2?"已通过":"已完成"))}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="remark" label="备注" align="center">
                            <template slot-scope="s">
                                {{s.row.remark?s.row.remark:"无"}}
                            </template>
                        </el-table-column>
                        <el-table-column label="查看" width="100" align="center">
                            <template slot-scope="s">
                                <el-button type="primary" icon="el-icon-view" circle @click="go_detail(s.row)"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="已完成" name="fifth">
                    <el-table :data="outList">
                        <el-table-column prop="outDan" label="出库单号" align="center"></el-table-column>
                        <el-table-column prop="emp.empName" label="出库员" align="center"></el-table-column>
                        <el-table-column prop="outDate" label="申请日期" align="center"></el-table-column>
                        <el-table-column prop="state" label="订单状态" align="center">
                            <template slot-scope="s">
                                <span>{{s.row.state==0?"待审核":(s.row.state==1?"未通过":(s.row.state==2?"已通过":"已完成"))}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="remark" label="备注" align="center">
                            <template slot-scope="s">
                                {{s.row.remark?s.row.remark:"无"}}
                            </template>
                        </el-table-column>
                        <el-table-column label="查看" width="100" align="center">
                            <template slot-scope="s">
                                <el-button type="primary" icon="el-icon-view" circle @click="go_detail(s.row)"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <!--分页-->
                <br/>
                <el-pagination background layout="total, prev, pager, next" :total="total" :current-page.sync="currPage"
                               :page-size="pageSize"  style="margin-left: 30px" @current-change="change_page">
                </el-pagination>
                <br/>
                <div style="clear: both"></div>
            </el-tabs>
        </div>
    </div>
</template>
<script>
    import add_out from "./add_out";

    export default {
        name: "out_ware",
        components:{
            add_out
        },
        data: function() {
            return {
                loading:true,
                //当前页码
                currPage:1,
                //页大小
                pageSize:3,
                //总页数
                total:0,
                //出库单列表数据
                outList:[],
                //传去详情页面的数据
                detailData:{},
                //出库单条件查询关键字
                searchText:'',
                //出库单条件查询数据
                selectModel:'',
                selectData:[{value:1,label:'出库单号',},{value:2,label:'出库员'}],
                //根据状态查询出库单数据
                judge:4,
                activeName:'first',
                //新增时自动生成的申请采购单单号
                appCaiDan:'',
                //新增出库单弹框状态
                outVisible: false,
                //Excel导出数据
                allOut:[],
                //Excel导出对应关系
                excelFields: {
                    "出库单单号":{
                        field:  "outDan",
                        callback: value => {
                            return value+'`'
                        }
                    },
                    "合同单号":{
                        field:  "conDan",
                        callback: value => {
                            return value+'`'
                        }
                    },
                    "申请人": "emp.empName",		//支持嵌套属性
                    "负责人": "principal",
                    "申请日期": "outDate",
                    "交付期数": "deliveryTime",
                    "订单状态": {
                        field: "state",
                        callback: value => {
                            if(value==0){
                                return "待审核"
                            }else if(value==1){
                                return "未通过"
                            }else if(value==2){
                                return "已通过"
                            }else{
                                return "已完成"
                            }
                        }
                    },
                    "备注": {
                        field: "remark",
                        callback: value => {
                            if(value==""||value==null){
                                return "无"
                            }else{
                                return value
                            }
                        }
                    },
                    "出库产品": {
                        field: "wareDetail",
                        callback: value => {
                            let product = ""
                            value.forEach(pl => {
                                let p ="产品名称:"+pl.proDetail.product.productName+"  "+"出库数量:"+pl.outNum+"  "+"规格属性:"
                                pl.proDetail.abilities.forEach(ab => {
                                    p +=ab.abilityName+" "
                                })
                                product += p + " | "
                            })
                            return product.substring(0, product.length-1)
                        }
                    },
                }
            };
        },
        methods: {
            //Excel导出数据
            all_out(){
                this.axios.get("api/ware/all-out").then(v=>{
                    this.allOut=v.data;
                }).catch()
            },
            //出库单条件查询
            searchOut(){
                this.get_out(this.currPage);
            },
            clearSearchOut(){
                this.searchText=''
                this.selectModel=''
                this.get_out(this.currPage);
            },
            //查看详情
            go_detail(row){
                window.console.log(row)
                this.detailData=row
                sessionStorage.setItem("out", JSON.stringify(this.detailData))
                this.$router.push({path:"/out_detail"})
            },
            //分页页码改变事件
            change_page(currPage){
                this.get_out(currPage);
            },
            //出库单列表查询
            get_out(currPage){
                this.loading = true
                this.axios.get("api/ware/out-list",{params:{"currPage":currPage,"pageSize":this.pageSize,"judge":this.judge,"searchText":this.searchText,"selectModel":this.selectModel}}).then(v=>{
                    this.outList=v.data.data;
                    this.total=v.data.total;
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                    this.global.mes_error("获取数据失败！")
                })
            },
            //根据状态查询出库单
            changeByState(tab){
                if(tab.name=='first'){
                    this.judge=4
                }
                if(tab.name=='second'){
                    this.judge=0
                }
                if(tab.name=='third'){
                    this.judge=1
                }
                if(tab.name=='fourth'){
                    this.judge=2
                }
                if(tab.name=='fifth'){
                    this.judge=3
                }
                this.get_out(this.currPage);
            },
            //生成出库单单号
            out_dan(){
                const now = new Date();
                const month = now.getMonth() + 1;
                const day = now.getDate();
                let no =  now.getFullYear()+(month<10? "0"+month:month )+(day<10?"0"+day:day);
                let ran = parseInt(Math.random()*10000000+1,10);
                String.prototype.padLeft =
                    Number.prototype.padLeft = function(total, pad) {
                        return (Array(total).join(pad || 0) + this).slice(-total);
                    };
                const str = ran.padLeft(8);
                const result = no+str;
                this.outDan=result;
            },
            //申请出库
            open_add_out(){
                this.out_dan();
                this.$store.dispatch("setVueAppCai",this);
                this.outVisible = true;
            },
        },
        created() {
            this.get_out(this.currPage);
            this.all_out();
        }
    }
</script>

<style scoped>
    *{margin: 0;padding: 0;font-size: 14px}
    .contract_main{background: #e4e7ee}
    .head{height:70px;background: #f8f6f8;line-height: 70px}
    .contract_title{display: inline-block;font-weight: unset;margin-left: 20px;padding-right: 3px;font-size: 25px}
    .el-col span{color: #b4b4bc}
    .nav {margin: 20px;background: #fcfbfd;width: 100%-40px;height:auto; min-height:55px !important;line-height: 55px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);}
    .nav .nav-item {display: inline-block;height: 45px;padding: 0px 15px;line-height: 45px;border-right: 1px solid #dcdfe6;}
    .nav .nav-item .el-button{color:grey}
    .content{margin: 20px;background: #fcfbfd;width: 100%-40px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);}
    .el-table .el-button{width: 30px;height: 30px}
    .el-button.is-circle{padding: 2px !important;}
    .el-tabs__header{margin-bottom: 0px !important;}
    /*分页修改背景颜色*/
    .el-pagination .el-input__inner{width: 40px!important;height: 30px!important;}
    /*图标样式*/
    .icon-sty{font-size: 15px;padding-right: 3px;}
    .selectDiv .el-form-item{width:150px;display:inline-block;float:left;margin-bottom: 0px !important;}
    .el-col span {color:grey;}
    .selectDiv .el-select input[type="text"]{padding-left:15px!important;}
    .nav-item .el-button{margin-top: -8px}
    .selectDiv{margin-top:7px;float:right;margin-right:-25px}
</style>